<template>
    <div>
        <el-main>
            <el-row :gutter="20" style="line-height:30px">
                <el-col :span="8" :offset="8">
                    <el-descriptions class="margin-top" :column="4" v-for="(info, index) in baseInfo" :key="index" border>
                        <el-descriptions-item :span="6">
                            <template slot="label">
                                <i class="el-icon-food"></i>
                                菜品名称
                            </template>
                            {{info.dishName}}
                        </el-descriptions-item>
                        <el-descriptions-item :span="6">
                            <template slot="label">
                                <i class="el-icon-notebook-1"></i>
                                菜品价格
                            </template>
                            {{info.dishPrice}}
                        </el-descriptions-item>
                        <el-descriptions-item :span="6">
                            <template slot="label">
                                <i class="el-icon-knife-fork"></i>
                                菜品口味
                            </template>
                            {{info.flavor}}
                        </el-descriptions-item>
                        <el-descriptions-item :span="6">
                            <template slot="label">
                                <i class="el-icon-s-data"></i>
                                菜品数量
                            </template>
                            {{info.dishNumber}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions class="margin-top" :column="1" border>
                        <el-descriptions-item >
                            <template slot="label">
                                <i class="el-icon-c-scale-to-original"></i>
                                菜品总数
                            </template>
                            {{realForm.dishTotalNumber}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <i class="el-icon-tickets"></i>
                                菜品总价格
                            </template>
                            {{realForm.amount}}
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-form :model="realForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                        class="demo-ruleForm">
                        <el-form-item label="备注提醒">
                            <el-input v-model="realForm.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="下单地址" prop="addressBookId">
                            <el-select v-model="realForm.addressBookId" placeholder="请选择送餐地址">
                                <el-option v-for=" ( aIC, index) in addressAndIdAndConsignee" :key="index"
                                    :label="aIC.address" :value="aIC.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="支付方式" prop="payMethod">
                            <el-radio-group v-model="realForm.payMethod">
                                <el-radio label="1">微信支付</el-radio>
                                <el-radio label="2">支付宝支付</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" icon="el-icon-circle-check">立即支付
                            </el-button>
                            <el-button @click="cancelPayOne" icon="el-icon-circle-close">取消支付</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-main>
        <el-dialog title="确认取消" :visible.sync="dialogVisible">
            <div>您确认要取消支付吗</div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="cancelPayTwo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { toPay, getAddressAndDish, toCancelPay } from '@/utils/modules/customer.js'
export default {
    mounted() {
        let order = JSON.parse(this.$route.query.order)
        console.log(order)
        let flavor = order.flavor.split(';')
        let dishId = order.dishId.split(';')
        let dishNumber = order.dishNumber.split(';')
        for (let i = 0; i < flavor.length; i++) {
            this.baseInfo.push({ 'flavor': flavor[i], 'dishId': dishId[i], 'dishNumber': dishNumber[i] })
        }
        this.realForm.flavor = order.flavor
        this.realForm.dishId = order.dishId
        this.realForm.amount = order.amount
        this.realForm.dishTotalNumber = order.dishTotalNumber
        this.realForm.dishNumber = order.dishNumber
        this.realForm.marketerId = order.marketerId
        if (order.id) {
            this.realForm.id = order.id
        }
        if(order.shoppingCartId){
            this.realForm.shoppingCartId = order.shoppingCartId
            console.log(this.realForm.shoppingCartId)
        }
        this.getBook()
    },
    data() {
        return {
            book: [],
            baseInfo: [],
            dialogVisible: false,
            realForm: {
                dishId: '',
                payMethod: '',
                addressBookId: '',
                remark: '',
                flavor: '',
                dishNumber: '',
                dishTotalNumber: 0,
                amount: 0,
                marketerId:''
            },
            addressBook: [], //接收数据库中的用户下单地址
            addressAndIdAndConsignee: [],
            rules: {
                addressBookId: [
                    { required: true, message: '请选择下单地址', trigger: 'change' }
                ],
                payMethod: [
                    { required: true, message: '请选择下单方式', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        getBook() {
            getAddressAndDish({ 'dishId': this.realForm.dishId }).then(res => {
                console.log(res)
                this.addressBook = JSON.parse(JSON.stringify(res.data.itemList))
                // console.log(this.addressBook)
                for (let i = 0; i < this.baseInfo.length; i++) {
                    this.baseInfo[i].dishName = res.data.etc[i].name
                    this.baseInfo[i].dishPrice = res.data.etc[i].price
                }
                let _that = this
                for (let i = 0; i < this.addressBook.length; i++) {
                    _that.addressAndIdAndConsignee.push({
                        id: _that.addressBook[i].id,
                        consignee: _that.addressBook[i].consignee,
                        address: _that.addressBook[i].provinceName
                            + _that.addressBook[i].cityName + _that.addressBook[i].districtName
                            + _that.addressBook[i].detail + _that.addressBook[i].label + ' '
                            + _that.addressBook[i].consignee + ' ' + _that.addressBook[i].phone
                    })
                }
                // console.log(this.addressAndIdAndConsignee)
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.realForm)
                    toPay(this.realForm).then(res => {
                        this.$router.push({
                            path: '/success',
                            query: {
                                message: res.message
                            }
                        })
                    }).catch(err => {
                        this.$router.push({
                            path: '/fail',
                            query: {
                                statusCode: err.statusCode,
                                message: err.message
                            }
                        })
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        cancelPayOne() {
            this.dialogVisible = true
        },
        cancelPayTwo() {
            toCancelPay(this.realForm).then(res => {
                this.$message({
                    type: 'success',
                    message: res.message,
                    showClose: true
                })
                setTimeout(() => {
                    this.$router.push({
                        path: '/customer'
                    })
                }, 500)
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        }
    }
}
</script>
<style>
.el-main {
    background-color: #E9EEF3;
    color: #333;
    /* text-align: center; */
    line-height: 160px;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}
</style>